import { View, Image, Swiper, SwiperItem } from '@tarojs/components';
import "taro-ui/dist/style/components/icon.scss";
import css from './index.module.less';

export default function PreContent(props) {
    const { title, name, organizationName, content, imgs } = props.data;

    const getCurTime = () => {
        const curYear = (new Date()).getFullYear();
        let curMonth = (new Date()).getMonth() + 1;
        if (curMonth < 10) curMonth = "0" + curMonth;
        const curDay = (new Date()).getDate();
        return curYear + "-" + curMonth + "-" + curDay;
    };

    const curTime = getCurTime();

    return (
        <View className={css.home}>
            {
                props.data.bigTitle == '预览文章' ?
                    <>
                        <View className={css.preview}>
                            <View className={css.title}>
                                {title}
                            </View>
                            <View className={css.info}>
                                <View className={css.nameAndOrg}>
                                    {name}&nbsp;&nbsp;&nbsp;{organizationName}
                                </View>
                                <View className={css.timeAndBrowse}>
                                    <View className='at-icon at-icon-clock'>
                                        &nbsp;{curTime}&nbsp;&nbsp;&nbsp;
                                    </View>
                                </View>
                            </View>

                            <View className={css.image}>
                                {
                                    imgs === undefined || imgs.length === 0 ? <></> :
                                        <Swiper indicatorColor='#999' indicatorActiveColor='#333' indicatorDots autoplay>
                                            {
                                                imgs.map((item, index) => (
                                                    <SwiperItem key={index}>
                                                        <Image src={item.url} />
                                                    </SwiperItem>
                                                ))
                                            }
                                        </Swiper>
                                }
                            </View>

                            <View className={css.content} style='white-space:pre-wrap'>
                                {content}
                            </View>
                        </View>
                    </> :
                    <>
                        <View className={css.preview}>
                            <View className={css.title}>
                                {title}
                            </View>

                            <View className={css.info}>
                                <View className={css.nameAndOrg}>
                                    {name}&nbsp;&nbsp;&nbsp;{organizationName}
                                </View>
                                <View className={css.timeAndBrowse}>
                                    <View className='at-icon at-icon-clock'>
                                        &nbsp;{curTime}&nbsp;&nbsp;&nbsp;
                                    </View>
                                </View>
                            </View>

                            <View className={css.content}>
                                <View className={css.text}>活动内容</View>
                                {content}
                            </View>

                            <View className={css.otherContent}>
                                <View>组织人: {props.data.activityContact}</View>
                                <View>联系方式: {props.data.contactNumber}</View>
                                <View>活动地点: {props.data.activityLocation}</View>
                                <View>集合地点: {props.data.meetingPlace}</View>
                                <View>集合时间: {props.data.activityTime}</View>
                                <View>报名截止时间: {props.data.registrationDeadline}</View>
                            </View>

                            <View className={css.image}>
                                {
                                    imgs === undefined || imgs.length === 0 ? <></> :
                                        <Swiper indicatorColor='#999' indicatorActiveColor='#333' indicatorDots autoplay>
                                            {
                                                imgs.map((item, index) => (
                                                    <SwiperItem key={index}>
                                                        <Image src={item.url} />
                                                    </SwiperItem>
                                                ))
                                            }
                                        </Swiper>
                                }
                            </View>

                        </View>
                    </>
            }
        </View>
    );
}
